<template>
	<!-- //v-for="(item,index) in list" :key="item.userid" -->

	<div class="mesList">
		<div class="mes-card" @click="toMes">
			<div class="card-top">
				<div style="display: flex; flex-direction: row; align-items: center;">
					<div style="font-size: 20px;" class="title">{{ title }}</div>
					<div class="tags">
						<!-- <van-tag style="color: white; margin-left: 5px;" color="#ff00d3" round
									type="primary">#标签</van-tag> -->
						<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ types }}
						</view>
					</div>
				</div>
			</div>
			<div class="card-body">
				<!-- <img style="width: 100%;height:100px ;"
							src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" /> -->
				<!-- <div class="card-text">有时候一个人上网也是挺无助的</div> -->
				<van-image v-if="imgList[0]" width="40rem" height="10rem" fit="cover" position="center"
					:src='imgList[0]' />
				<view class="content">
					{{ Content }}
				</view>
			</div>

			<div class="card-bottom">
				<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
					<van-image round width="2rem" height="2rem" :src='avatar' />
					<span style="margin-left: 5px;">{{ Username }}</span>
				</div>
				<view style="color: #9a9a9a;" class="time">
					{{ time.substring(0, 10) }}
				</view>
			</div>
		</div>
	</div>

</template>
<script>
import { truncateString } from '@/store/constants.js'
export default {
	props: ['content', 'posterid', 'type', 'avatar', 'title', 'time'],
	mounted() {
		let tags = JSON.parse(this.type)
		tags.forEach(item => {
			this.types = this.types + '#' + item.name
		})
		this.imgList = this.processString(this.content).images.slice(0, 3)
		this.Content = truncateString(this.content)
	},
	data() {
		return {
			types: '',
			imgList: [],
			Content: ''
		}
	},
	methods: {
		processString(inputString) {
			console.log(inputString)
			const parts = inputString.split('**/img/**');

			// 获取文本部分和图片 URL 部分
			const textPart = parts[0];
			const imageUrls = parts[1] ? parts[1].split(',') : [];

			// 将图片 URL 部分存储为数组
			const imagesArray = imageUrls.map(url => url.trim());
			// 返回处理后的结果，图片部分作为数组返回
			return {
				text: textPart.trim(), // 去除文本部分两端的空格
				images: imagesArray // 图片 URL 部分作为数组返回
			};

		},
		toMes() {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${this.posterid}`
			})
		}
	}
}
</script>
<style scoped lang="less">
.card-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mes-card {
	overflow: hidden;
	position: relative;
	text-align: left;
	border-radius: 0.5rem;
	background-color: #fff;
	width: 100%;
	box-shadow: 7px 7px 14px #d0d0d0,
		-7px -7px 14px #f0f0f0;
}

.card-bottom {
	padding: 10px;
	align-items: center;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.time {
	margin-right: 10vw;
}

.mesList {
	width: 100vw;
	padding: 10px;
	padding-left: 5px;
	padding-right: 5px;
	display: flex;
	justify-content: center;
	overflow: hidden
}



.showImg {
	max-width: 25vw;
	margin-top: 2vh;
	margin-right: 1vh;
	margin-bottom: 2vh;
}

.timeAndType {
	display: flex;
	font-size: 10px;
	justify-content: flex-end;
	margin-right: 2vw;
	align-items: center;

	.time {
		margin-right: 4vw;
	}

	.type {
		color: blue;
	}
}

/* 单个卡片 */
.mes {
	margin-left: 18rpx;
	margin-right: 18rpx;
	margin-bottom: 2vh;
	z-index: 5;
	display: flex;
	margin-top: 18rpx;
	border-radius: 10rpx;
	padding-top: 5vh;
	box-shadow: 2px 2px 3px 2px #888888;
	background-color: #fefefe;
	padding-bottom: 2vh;
}

.headimg {
	width: 80rpx;
	height: 80rpx;
	border-radius: 75%;
	margin-left: 15rpx;
	margin-right: 15rpx;
	background-color: aliceblue;
}

.content {
	--webkit-line-camp: 2,
		-- width: 600rpx;
	margin-top: 3px;
	margin-bottom: 3px;
	font-size: 30rpx;
	margin-left: 20px;
}

.title {
	font-weight: 700;
	margin-left: 20px;
	margin-right: 3px;
}

.bg {
	z-index: 0;
	width: 100%;
	height: 80%;
	position: absolute;
}
</style>